<template>
	<view class="wui-swiper">
		<swiper
			class="wui-swiper-content"
			:current="current"
			circular
			previous-margin="80rpx"
			next-margin="80rpx"
			:style="{ height: height }"
			:autoplay="autoplay"
			:interval="interval"
			:duration="duration"
			:display-multiple-items="1"
			@change="swiperChange"
		>
			<swiper-item v-for="(item, index) in list" :key="index" @click="swiperClick(item)">
				<view class="swiper-item" :class="[index === current ? '' : 'swiper-item-narrow']">
					<view :class="['uni-bg-' + item]">{{ item }}</view>
				</view>
			</swiper-item>
		</swiper>
		<view class="wui-swiper-indicator">
			<text
				v-if="indicatorType === 'spot'"
				class="wui-swiper-indicator-spot"
				:class="[current === index ? 'wui-swiper-indicator-spot-active' : '']"
				v-for="(item, index) in list"
				:key="index"
			></text>
			<text v-if="indicatorType === 'num'" class="wui-swiper-indicator-num">{{ current + 1 }} / {{ list.length }}</text>
		</view>
		<view class="wui-swiper-progress" v-if="progress" :style="[progressNumComputed]"></view>
	</view>
</template>

<script>
export default {
	name: 'w-swiper',
	props: {
		height: {
			type: String,
			default: '300rpx'
		},
		indicatorType: {
			type: String,
			default: 'num'
		},
		progress: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			autoplay: true,
			interval: 2000,
			duration: 500,
			current: 0,
			list: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
			progressNum: 0
		};
	},
	computed: {
		progressNumComputed() {
			let width = ((this.current + 1) / this.list.length).toFixed(2) * 100;
			return {
				'--width': width + '%'
			};
		}
	},
	methods: {
		swiperChange(e) {
			this.current = e.detail.current;
			this.$emit('change', e);
		},
		swiperClick(item) {
			this.$emit('click', item);
		}
	}
};
</script>

<style lang="scss" scoped>
.wui-swiper {
	width: 100%;
	position: relative;
	// background-color: #ccc;
}
.wui-swiper-content {
	.swiper-item {
		height: 100%;
		transition: all 0.3s;
		font-size: 120rpx;

		> view {
			width: 100%;
			height: 100%;
			display: flex;
			color: #fff;
			justify-content: center;
			align-items: center;
		}

		.uni-bg-A {
			background-color: #ff5537;
		}

		.uni-bg-B {
			background-color: #4cffca;
		}

		.uni-bg-C {
			background-color: #6183ff;
		}

		.uni-bg-D {
			background-color: #ffde23;
		}

		.uni-bg-E {
			background-color: #ffa98e;
		}

		.uni-bg-F {
			background-color: #684538;
		}

		.uni-bg-G {
			background-color: #206828;
		}
	}

	.swiper-item-narrow {
		transform: scale(0.9);
		transform-origin: center center;
	}
}

.wui-swiper-indicator {
	height: 60rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	.wui-swiper-indicator-spot {
		display: inline-block;
		width: 40rpx;
		height: 6rpx;
		background-color: #d5d5d5;
		margin: 0 8rpx;
		transition: all 0.3s;
		border-radius: 20rpx;
	}
	.wui-swiper-indicator-spot-active {
		background-color: #541a16;
		width: 40rpx;
		height: 6rpx;
	}
}

.wui-swiper-progress {
	position: absolute;
	bottom: 0;
	left: 0;
	width: var(--width);
	height: 6rpx;
	border-radius: 6rpx;
	background-color: #ff8c4a;
	transition: all .3s;
}
</style>
